import React, { useEffect } from 'react'
import {useState} from "react"
import SideMenu from '../../components/sandbox/SideMenu'
import TopHeader from '../../components/sandbox/TopHeader'
import NewsRouter from '../../components/sandbox/NewsRouter'
import nProgress from 'nprogress'
import "nprogress/nprogress.css"
import "./NewsSandBox.css"

import { Layout, } from 'antd';

const { Content } = Layout;


export default function NewsSandBox() {
  const [collapsed,setCollapsed]=useState(false)
  nProgress.start()
  useEffect(()=>{nProgress.done()})
  // 由子组件TopHeader传过来的collapsed属性，进行修改，该属性也传给了SideMenu组件，通过子->父->另一子实现数据响应
  function changeCollapsed(c){
      setCollapsed(c)
  }
  return (
    <Layout>
      {/* 左侧导航 */}
      <SideMenu collapsed={collapsed}></SideMenu>
      <Layout className="site-layout">
        {/* 顶部top */}
        <TopHeader changeC={changeCollapsed}></TopHeader>
        {/* 主题内容 */}
        
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            overflow:'auto'
          }}
        >
         <NewsRouter></NewsRouter>
        </Content>
      </Layout>

    </Layout>
  )
}
